<template>
  <base-module
    class="month-node-comp"
    :title="title"
    @icon-click="handleClick"
    v-bind="$attrs"
    v-on="$listeners"
  >
    <ul class="list-container">
      <li v-for="item in nodeList" class="list-item" :key="item.id">
        <span class="list-item-label" :title="item.scheduleName">{{ item.scheduleName }}</span>
        <span class="list-item-date">
          {{ item.planStartTime }} - {{ item.planEndTime }}
        </span>
        <span :class="['list-item-status', item.hasOverdue ? 'danger' : '']">{{ item.statusStr }}</span>
      </li>
    </ul>
  </base-module>
</template>

<script>
import BaseModule from '@/components/public/BaseModule';

export default {
  components: {
    BaseModule
  },
  props: {
    title: {
      type: [String, Object],
      default: '本月节点'
    },
    data: {
      type: Array,
      default: () => ([])
    }
  },
  data() {
    return {
      nodeList: []
    };
  },
  computed: {
    projectId() {
      return this.$store.state.currentProjectId;
    },
  },
  mounted() {
    this.getData();
  },
  methods: {
    async getData() {
      const params = {
        pageFlag: false,
        projectId: this.projectId,
        scheduleMonth: this.$moment().format('yyyy-MM'),
        scheduleType: '1', // 0： 总计划， 1： 月计划
      };
      const { success, data: {
        data
      }} = await this.$Model.getProgressList(params);
      if (success && data) {
        const list = data.list || [];
        this.nodeList = list.map(item => {
          // (状态:天数）状态0:正常；1：逾期
          const { startEarly, endEarly } = item;
          const [startStatus] = startEarly.split(':');
          const [endStatus] = endEarly.split(':');
          const hasOverdue = startStatus === '1' || endStatus === '1';
          return {
            hasOverdue,
            statusStr: hasOverdue ? '逾期' : '正常',
            ...item,
          };
        });
      }
    },
    handleClick() {
      this.$router.push('/progress/totality');
    }
  }
};
</script>

<style scoped lang="scss">
  @import "../../../assets/styles/main";

  .month-node-comp {
    .list-container {
      width: 100%;
      height: 100%;
      padding-top: 10px;
      overflow-y: auto;
      .list-item {
        width: 100%;
        float: left;
        display: flex;
        justify-content: space-between;
        align-items: center;
        min-height: 50px;
        color: #fff;
        font-size: 14px;
        padding: 0 10px;
        border-bottom: 1px solid rgba(45, 56, 123, .2);
        overflow: hidden;
        margin-bottom: 10px;
        background-color: rgba(14, 14, 45, .7);
        border-radius: 5px;
        .list-item-label {
          color: rgba(179, 189, 248, .6);
          margin-right: 10px;
          width: 160px;
          height: 100%;
          display: flex;
          align-items: center;
        }
        .list-item-date {
          /*color: #91c0f9;*/
          width: 200px;
          min-height: 33px;
          display: flex;
          line-height: 25px;
          align-items: center;
        }
        .list-item-status {
          font-size: 12px;
          padding: 2px 5px;
          border-radius: 4px;
          border: 1px solid rgba(46, 183, 111, .6);
          background-color: rgba(46, 183, 111, .6);
          &.danger {
            border: 1px solid rgba(245, 108, 108, .6);
            background-color: rgba(245, 108, 108, .6);
          }
        }
      }
    }
  }
</style>
